<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: #0b1b32;
		}
	</style>
</head>
<body>
	<div class="test">
		
	</div>
	<script src="http://show.funlee.cn/api/d3.min.js"></script>
	<script>
		var width = 800;
		var height = 800;
		var outRadius = 260;//外圆环半径
		var innerRadius = 100;//内圆环半径
		
		var padding = {top: 50,right: 50,bottom: 50,left: 50};
		var dataset = [
						{'name':'类型一','value':40},
						{'name':'类型二','value':50},
						{'name':'类型三','value':52},
						{'name':'类型四','value':35},
						{'name':'类型五','value':45},
						{'name':'类型六','value':50},
						{'name':'类型七','value':40},
						{'name':'类型八','value':39},
						{'name':'类型九','value':28}
					];

		var svg = d3.select(".test").append("svg").attr("width",width).attr("height",height);
		
		//外环弧生成器
		var arcPathOuter = d3.svg.arc()
					.innerRadius(outRadius - 26)
					.outerRadius(outRadius)
					
		//内环弧生成器			
		var arcPathInner = d3.svg.arc()
					.innerRadius(innerRadius - 10)
					.outerRadius(innerRadius)
					
		//添加外环
		svg.append('path')
			.attr('d',function() {
				return arcPathOuter({startAngle:-0.5*Math.PI,endAngle:0.5*Math.PI})
			})
			.attr('fill','#4b84d5')
			.attr('transform','translate('+width/2+','+height/2+')')
		
		//添加内环
		svg.append('path')
			.attr('d',function() {
				return arcPathInner({startAngle:-0.5*Math.PI,endAngle:0.5*Math.PI})
			})
			.attr('fill','#005faf')
			.attr('transform','translate('+width/2+','+height/2+')')
		
		//添加内外环连线--左
		svg.append('line')
		.attr({
			'x1':width / 2,
			'y1':height / 2,
			'x2':width / 2 - (outRadius - innerRadius) -30,
			'y2':height / 2,
			'stroke-width':10,
			'stroke':'#005faf',
			'transform':'translate('+(10-innerRadius)+','+'-4)'
		})
		//添加内外环连线--右
		svg.append('line')
		.attr({
			'x1':width / 2,
			'y1':height / 2,
			'x2':width / 2 + (outRadius - innerRadius) +30,
			'y2':height / 2,
			'stroke-width':10,
			'stroke':'#005faf',
			'transform':'translate('+(innerRadius - 10)+','+'-4)'
		})
		
		//添加标题
		svg.append('text')
			.attr('transform','translate('+width/2+','+height/2+')')
			.text('问题类别')
			.attr({
				'fill':'#fff',
				'font-size':'28px',
				'text-anchor':'middle'
			})
		//开始绘制数据
		
		//定义百分比数据与半径的线性比例值
		var linear = d3.scale.linear()
						.domain([0,100])
						.range([innerRadius,outRadius])
		
		var group = svg.selectAll('g')
					.data(dataset)
					.enter()
					.append('g')
		
		group.append('path')
			.attr('d',function(d,i) {
				var arcData = d3.svg.arc()
					.innerRadius(innerRadius)
					.outerRadius(linear(d.value))
				var part = Math.PI / (dataset.length * 2)
				var startAngle = (2*i + 1) * part - 0.5 * Math.PI - 0.5 * part
				var endAngle = startAngle + part
				
				return arcData({startAngle:startAngle,endAngle:endAngle})
			})
			.attr('fill','#0065ad')
			.attr('transform','translate('+width/2+','+height/2+')')
		//添加百分比数值
		group.append('text')
			.attr('transform',function(d,i) {
				var arcData = d3.svg.arc()
					.innerRadius(innerRadius)
					.outerRadius(linear(d.value))
				
				var part = Math.PI / (dataset.length * 2)
				var startAngle = (2*i + 1) * part - 0.5 * Math.PI - 0.5 * part
				var endAngle = startAngle + part
				
				var x = arcData.centroid({startAngle:startAngle,endAngle:endAngle})[0] *1.4
				var y = arcData.centroid({startAngle:startAngle,endAngle:endAngle})[1] *1.4
				return 'translate('+width/2+','+height/2+')' + 'translate('+x+','+y+')'
			})
			.text(function(d) {
				return d.value + '%'
			})
			.attr({
				'fill':'#d71d8c',
				'font-size':'20px',
				'text-anchor':'middle'
			})
		
		//添加单个数据项数据名称
		group.append('text')
			.attr('transform',function(d,i) {
				var arcData = d3.svg.arc()
					.innerRadius(innerRadius)
					.outerRadius(linear(d.value))
					
				var part = Math.PI / (dataset.length * 2)
				var startAngle = (2*i + 1) * part - 0.5 * Math.PI - 0.5 * part
				var endAngle = startAngle + part
				
				var x = arcData.centroid({startAngle:startAngle,endAngle:endAngle})[0] * 2
				var y = arcData.centroid({startAngle:startAngle,endAngle:endAngle})[1] * 2
				return 'translate('+width/2+','+height/2+')' + 'translate('+x+','+y+')'
			})
			.text(function(d) {
				return d.name
			})
			.attr({
				'fill':'#fff',
				'font-size':'20px',
				'text-anchor':'middle'
			})
		
	
			

	</script>
</body>
</html>